<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org"
      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'music',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
<th:block th:fragment="head">
    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
                _permalink = ${singlePage.status.permalink},
                _cover = ${singlePage.spec.cover},
                _excerpt = ${singlePage.status.excerpt},
                _type = 'website')}"></th:block>
</th:block>
<th:block th:fragment="content">

    <div class="page" id="body-wrap">
        <!-- 头部导航栏 -->
        <header class="not-top-img" id="page-header">
            <nav th:replace="~{modules/nav :: nav(title = '音乐馆')}"></nav>
        </header>
        <main class="layout hide-aside" id="content-inner">
            <div id="page">
                <div class="music-mask"></div>
                <h1 class="page-title">音乐馆</h1>
                <div id="anMusic-page">
                    <!-- <div id="anMusicBtnGetSong"><i class="anzhiyufont anzhiyu-icon-shuffle"></i></div>
                    <div id="anMusicRefreshBtn"><i class="anzhiyufont anzhiyu-icon-arrows-rotate"></i></div>
                    <div id="anMusicSwitching"><i class="anzhiyufont anzhiyu-icon-repeat"></i></div> -->
                    <div id="anMusic-page-meting">
                        <meting-js th:id="${theme.config.tool.nav_music.id}" th:server="${theme.config.tool.nav_music.server}" type="playlist" mutex="true" preload="auto"
                                   theme="var(--heo-main)" order="list" list-max-height="calc(100vh - 169px)!important">
                        </meting-js>
                    </div>
                </div>
            </div>


            <link rel="stylesheet" th:href="${assets_link + '/libs/aplayer/music.css'}" >


        </main>
        <!-- 底部 -->
        <footer th:replace="~{modules/footer}"/>
    </div>

</th:block>

</html>
